<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/header&footer.css" />
    <link rel="stylesheet" href="./css/over.css" />
    <link rel="stylesheet" href="./link/bootstrap.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="http://code.jquery.com/color/jquery.color.plus-names-2.1.2.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  </head>
  <style>
    
  </style>
  <body style="padding-top: 0.02px;">
    <!--解决position:fixed的margin-top塌陷问题-->
    <div id="header">
      <strong>IT 培优</strong>
      <ul id="nav">
        <li v-for="(navList,index) in navLists" :key="index" class="navList">
          <a
            :href="navList.url"
            :class="subpage === navList.url ? 'active' : ''"
            >{{ navList.name }}</a
          >
        </li>
      </ul>
      <div id="search"></div>
      <div id="searchblock">
        <input type="text" id="searchInput" placeholder="请输入搜索内容..." onfocus="this.placeholder=''" onblur="this.placeholder='请输入搜索内容...'" autocomplete="off">
        <img src="./static/search1.png" alt="" id="sBlockIcon" >
      </div>
      <img src="./static/search.png" alt="" id="searchIcon"  >
    </div>

    <!-- 概况 -->
    <div id="overview">
      <div id="headerPicBlock">
        <div id="overshadow"></div>
        <div id="headerPic">
          <img src="static/bgimg1.jpg" alt="" />
        </div>
        <div
          class="trangleShadowLeft"
          style="top:61%;transform:rotate(9deg);left: -18%;"
        ></div>
        <!-- 白色左三角遮罩 -->
        <div
          class="trangleShadowright"
          style="top:60%;transform:rotate(-20deg);left: 75%;"
        ></div>
        <!-- 白色右三角遮罩 -->
      </div>

      <div id="Aside">
        <div
          v-for="(iconList,index) in iconLists"
          :key="index"
          :id="asideId(index)"
          class="asides"
          @mouseenter="mouseOver(index)"
          @mouseleave="mouseLeave(index)"
          @click="check = index"
        >
          <img
            v-if="(active === index && isHover === true) || check === index"
            :src="iconList.icon_hover"
            class="imgs"
            alt=""
          />
          <img v-else :src="iconList.icon" class="imgs" alt="" />
          <span class="sort">{{ iconList.title }}</span>
        </div>
      </div>

      <div id="introduceITCultivate">
        <h1>I T 培优</h1>
        <p class="banners" id="banners2">Stay Hungry, Stay Foolish</p>
        <div id="ITcontent">
          <div id="ITimg">
            <img src="./static/it培优.jpg" alt="" />
          </div>
          <div id="ITtext">
            <p>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;四川师范大学IT培优成立于2011年11月，隶属于四川师范大学计算机科学学院，起初是学院的一个特色项目，后由一群酷爱IT的高年级学生自发组织，
              经学院批准后，现由学院副院长郭涛老师领导，樊祥奎老师总负责，成为一个不同于社团、学院两委，致力于打造IT精英的自发性优秀学生组织。在学院颇具影响力。
            </p>
            <p>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IT培优旨在将对各专业方向感兴趣的同学集结起来，由专业老师指导并发展后，取得学习和实践两方面长足的进步，为同学们提供一个自我发展超越的绝佳平台。
              在举行的各类课程中，组员们不但可以通过老师或学长学姐的引导，还能通过与同学的交流，获取更多的理论知识，同时，在实际项目中能够将自己所学到的理论知识更多的运用起来，
              锻炼自己的动手能力，激发自己的创造力，也在动手中获得新收获。横向上比同级同学拥有更丰富的专业知识，纵向上继承学习师兄师姐的优良传统。
            </p>
          </div>
          <button>了解更多>>></button>
        </div>
      </div>

      <div id="groupIntroBlock">
        <div id="groupIntroduce">
          <!-- 编程组介绍 -->
          <div class="groupIntroduce">
            <div class="leftbgimg">
              <img src="./static/groupBgimg1.png" alt="" />
            </div>
            <div id="BianChengGroup">
              <div
                v-for="(group,index) in ProgrammingGroups"
                :key="index"
                :id="programmingGroupId(index)"
                class="groupsBlock"
              >
                <div class="groupsBlockTitle">
                  <p class="groupsBlockTitlePart">{{ group.name }}</p>
                </div>
                <div class="groupsBlockContent">
                  <p class="groupsBlockContent_p">
                    &nbsp;&nbsp;&nbsp;&nbsp;{{ group.introduce }}
                  </p>
                </div>
                <!--
                <p><a href="">小组日常</a></p>
                <p><a href="">小组成员</a></p>
                <p><a href="">小组作品</a></p>
                -->
              </div>
              <div class="InitialBlockTitle">
                <p class="groupsBlockTitlePart">编程 组</p>
              </div>
              <div class="InitialBlockContent"></div>
              <div class="InitialIntroduce">
                <p>
                  &nbsp;&nbsp;&nbsp;&nbsp;IT培优编程组结合计科学院专业出发，提供了多种不同方向的编程语言及技术的学习环境，
                  旨在结合学习与实践，提升同学们的编程能力，丰富同学们的专业知识
                </p>
                <p>
                  &nbsp;&nbsp;&nbsp;&nbsp;编程组是拥有最多小组的大组，在2019年重组调整后，现共有9个小组，分别是ACM组、
                  嵌入式组、信息安全组、Web前端组、Swift组、C++组、C#组、Java组、Python组
                </p>
              </div>
            </div>
            <div class="rightbgimg">
              <img src="./static/groupBgimg2.png" alt="" />
            </div>
          </div>

          <!-- 美工组介绍 -->
          <div class="groupIntroduce">
            <div class="leftbgimg">
              <img src="./static/groupBgimg1.png" alt="" />
            </div>
            <div id="ArtGroup">
              <div
                v-for="(group,index) in ArtGroups"
                :key="index"
                :id="ArtGroupId(index)"
                :style="getWidth()"
                class="groupsBlock"
              >
                <div class="groupsBlockTitle">
                  <p class="groupsBlockTitlePart">{{ group.name }}</p>
                </div>
                <div class="groupsBlockContent">
                  <p class="groupsBlockContent_p">
                    &nbsp;&nbsp;&nbsp;&nbsp;{{ group.introduce }}
                  </p>
                </div>
              </div>
              <div class="InitialBlockTitle">
                <p class="groupsBlockTitlePart">美工 组</p>
              </div>
              <div class="InitialBlockContent"></div>
              <div class="InitialIntroduce_Art">
                <p>
                  &nbsp;&nbsp;&nbsp;&nbsp;IT培优美工组对平面，视频，色彩
                  ，基调，创意等进行加工和创作的技术培养，
                  主要负责形象包装、网站优化、产品宣传画册、电子商务专题设计等
                </p>
                <p>
                  &nbsp;&nbsp;&nbsp;&nbsp;美工组经2019年重组调整后，现共有2个小组，分别是平面设计组和影视编辑组
                </p>
              </div>
            </div>
            <div class="rightbgimg">
              <img src="./static/groupBgimg2.png" alt="" />
            </div>
          </div>

          <!-- 产品组介绍 -->
          <div class="groupIntroduce">
            <div class="leftbgimg">
              <img src="./static/groupBgimg1.png" alt="" />
            </div>
            <div id="productsGroup">
              <div class="InitialBlockTitle" style="width:30%;">
                <p class="groupsBlockTitlePart">产品组<br />(原商务组)</p>
              </div>
              <div class="InitialBlockContent"></div>
              <div
                class="InitialIntroduce_Art"
                style="width:50%;margin-left: 8%; margin-top:8%"
              >
                <p>
                  &nbsp;&nbsp;&nbsp;&nbsp;我们致力于增强同学们对产品的了解，通过进行产品逻辑思维训练，学习使用xmind，
                  幕布，axure等工具，掌握市场营销等产品相关的基础知识，并融入通用性的职场知识技能，为就业之时提供帮助，
                  培养出一批又一批产品领域的英才。期待感兴趣的同学加入！
                </p>
              </div>
            </div>
            <div class="rightbgimg">
              <img src="./static/groupBgimg2.png" alt="" />
            </div>
          </div>

          <!-- 教师技能组介绍 -->
          <div class="groupIntroduce">
            <div class="leftbgimg">
              <img src="./static/groupBgimg1.png" alt="" />
            </div>
            <div id="teacherSkillGroup">
              <div class="InitialBlockTitle" style="width:30%;">
                <p class="groupsBlockTitlePart">教师技能组</p>
              </div>
              <div class="InitialBlockContent"></div>
              <div
                class="InitialIntroduce_Art"
                style="width:50%;margin-left: 8%; margin-top:8%"
              >
                <p>&nbsp;&nbsp;&nbsp;&nbsp;（敬请期待）</p>
              </div>
            </div>
            <div class="rightbgimg">
              <img src="./static/groupBgimg2.png" alt="" />
            </div>
          </div>

          <!-- 新媒体组介绍 -->
          <div class="groupIntroduce">
            <div class="leftbgimg">
              <img src="./static/groupBgimg1.png" alt="" />
            </div>
            <div id="mediaGroup">
              <div class="InitialBlockTitle" style="width:30%;">
                <p class="groupsBlockTitlePart">新媒体<br />教育组</p>
              </div>
              <div class="InitialBlockContent"></div>
              <div
                class="InitialIntroduce_Art"
                style="width:50%;margin-left: 8%; margin-top:3%"
              >
                <p>
                  &nbsp;&nbsp;&nbsp;&nbsp;该组是基于四川师范大学教育技术学专业师生运营的一个微信公众平台，以
                  “技术变革教育”为宗旨，
                  通过传播分享信息化教育中的工具、技术、资源、思维等内容，以促进教师职后碎片化学习和提升四川师范大学教育技术学专业影响力
                  为目的的新媒体运营小组。小组由周雄俊副教授担任指导老师，现有成员16人，其中研究生2人，本科生14人。截至2018年11月2日，
                  平台关注量已达到2.3万人，用户覆盖全国31个省级行政区域，其中80%为中小学在职教师，平台历史累计推送原创文章150篇。
                  该平台已成为有一定影响力的在职教师职后学习、在校师范生综合素养拓展的新媒体学习交流平台。欢迎同学们的加入！
                </p>
              </div>
            </div>
            <div class="rightbgimg">
              <img src="/static/groupBgimg2.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="footer" style="position: relative">
      <div id="footerShadowLeft"></div>
      <!-- 底部左三角遮罩 -->
      <div id="footerShadowright"></div>
      <!-- 底部右三角遮罩 -->
      <p>地址：四川省成都市成龙大道二段1819号、四川师范大学成龙校区</p>
      <p>邮编：610101</p>
      <p>联系电话：11111111111 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 22222222222</p>
      <p><a href="">管理登录</a></p>
    </div>
    <p id="footerCopyright">Copyright © 2019 四川师范大学 IT培优</p>

    <script src="./js/over_vue.js"></script>
    <script src="./js/header_vue.js"></script>
    <script src="./js/over.js"></script>
    <script src="./js/header&footer.js"></script>
  </body>
</html>
